<template>
  <el-backtop :right="50" :bottom="100" />
  <el-affix>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false">
      <el-menu-item index="0" @click="clickToHome()">饭团</el-menu-item>
      <el-menu-item index="1">关于</el-menu-item>
      <el-menu-item index="2">更新日志</el-menu-item>
      <div style="margin-left: 20%;">
        <el-autocomplete style="margin-top: 10px; width: 400px;" placeholder="Please input" />
        <el-button type="primary">搜索</el-button>
      </div>
      <div class="flex-grow"></div>
      <div>
        <el-image
          style="height: 50px; width: 50px; margin-top: 5px"
          @mouseenter="avatarMouseIn()"
          @mouseleave="avatarMouseOut()"
          :src="config.userAvatarPath"
          fit="cover"
        />
        <el-card
          class="box-card"
          v-show="config.userInfoShow"
          @mouseenter="userInfoCardMouseIn()"
          @mouseleave="userInfoCardMouseOut()"
        >
          <el-row>
            <el-col :span="16">
              <h3 style="margin: 0px;">
                <el-text size="large" truncated>
                  早上好!
                  <h3 style="display: inline-block; margin-top: 0px;">
                    {{
                    userData.user.nickName
                    }}
                  </h3>
                </el-text>
              </h3>
            </el-col>
            <el-col :span="8">
              {{ userData.user.riceGrainNumber }}米粒
              <svg
                t="1684066835413"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                p-id="2770"
                width="15"
                height="15"
              >
                <path
                  d="M696.32 271.36C535.04 138.24 391.68 94.72 307.2 133.12 217.6 176.64 145.92 409.6 189.44 601.6c40.96 181.76 176.64 302.08 320 302.08 130.56 0 325.12-120.32 376.32-230.4 40.96-125.44-17.92-261.12-189.44-401.92z"
                  fill="#FFD000"
                  p-id="2771"
                />
                <path
                  d="M71.68 629.76C17.92 386.56 107.52 94.72 256 25.6c138.24-64 325.12 0 514.56 153.6C972.8 343.04 1062.4 529.92 998.4 716.8c-66.56 156.16-309.76 307.2-488.96 307.2-197.12 0-384-156.16-437.76-394.24z m624.64-358.4C535.04 138.24 391.68 94.72 307.2 133.12 217.6 176.64 145.92 409.6 189.44 601.6c40.96 181.76 176.64 302.08 320 302.08 130.56 0 325.12-120.32 376.32-230.4 40.96-125.44-17.92-261.12-189.44-401.92z"
                  fill="#E9A637"
                  p-id="2772"
                />
                <path
                  d="M340.48 181.76C396.8 263.68 616.96 691.2 657.92 768c-48.64 43.52-110.08 71.68-174.08 76.8-94.72 0-204.8-89.6-238.08-261.12s25.6-363.52 94.72-401.92z"
                  fill="#FFF69F"
                  p-id="2773"
                />
              </svg>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-text style="text-align: center;">
                等级:
                <span style="color: red; font-size: 17px;">
                  {{
                  userData.userLevel
                  }}
                </span>
              </el-text>
            </el-col>
            <el-col :span="20">
              <el-progress :percentage="config.userLevelPercentage" style="margin-top: 5px;">
                <el-text size="small">{{ userData.user.exp }} / {{ config.userNextUpExp }}</el-text>
              </el-progress>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-link :underline="false">
                <h2>{{ userData.followersCount }}</h2>关注
              </el-link>
            </el-col>
            <el-col :span="8">
              <el-link :underline="false">
                <h2>{{ userData.followingCount }}</h2>粉丝
              </el-link>
            </el-col>
            <el-col :span="8">
              <el-link :underline="false">
                <h2>{{ userData.contentCount }}</h2>内容
              </el-link>
            </el-col>
          </el-row>
          <el-row>
            <el-button :icon="User" text class="user-info-button" @click="personalCenter">账号设置</el-button>
          </el-row>
          <el-row>
            <el-button :icon="Document" text class="user-info-button">内容管理</el-button>
          </el-row>
          <hr />
          <el-row>
            <el-button type="danger" text class="user-info-button" @click="clickLogout">退出登录</el-button>
          </el-row>
        </el-card>
      </div>
      <el-menu-item index="3" @click="toPublishArticle">
        <el-icon :size="25" style="color: #303133;">
          <Edit />
        </el-icon>
        <span style="color: #303133; font-size: 14px; text-align: center;">发布</span>
      </el-menu-item>
      <el-menu-item index="4">
        <el-icon :size="25" style="color: #303133;">
          <el-badge
            :value="userData.noReadMessageCount > 99 ? '99+' : userData.noReadMessageCount"
            class="item"
            v-if="userData.noReadMessageCount != 0"
          >
            <ChatLineSquare />
          </el-badge>
          <ChatLineSquare v-if="userData.noReadMessageCount == 0" />
        </el-icon>
        <span style="color: #303133; font-size: 14px; text-align: center;">消息</span>
      </el-menu-item>
      <el-menu-item index="5">
        <el-icon :size="25" style="color: #303133;">
          <Star />
        </el-icon>
        <span style="color: #303133; font-size: 14px; text-align: center;">收藏</span>
      </el-menu-item>
      <el-menu-item index="6">
        <el-icon :size="25" style="color: #303133;">
          <Clock />
        </el-icon>
        <span style="color: #303133; font-size: 14px; text-align: center;">历史</span>
      </el-menu-item>
    </el-menu>
  </el-affix>
</template>

<script>
import { useRouter } from "vue-router";
import { User, Document } from "@element-plus/icons-vue";
import { reactive, onMounted } from "vue";
import UserUtil from "../../utils/UserUtil.js";
import InfoUtil from "../../utils/InfoUtil.js";
import RequestUtil from "../../utils/RequestUtil.js";
import StringUtil from "@/utils/StringUtil";
import { useStore } from "vuex";
export default {
  setup() {
    onMounted(() => {
      let store = useStore();
      RequestUtil.sendGetRequest("/user/queryUserInfo").then(
        response => {
          if (response.code !== 200) {
            InfoUtil.warning(response.message);
          }
          let responseData = response.data;
          //向下取整
          responseData.user.riceGrainNumber = Math.ceil(
            responseData.user.riceGrainNumber
          );
          userData.user = responseData.user;
          userData.userLevel = responseData.userLevel;
          userData.followersCount = responseData.followersCount;
          userData.followingCount = responseData.followingCount;
          userData.contentCount = responseData.contentCount;
          userData.noReadMessageCount = responseData.noReadMessageCount;
          config.userNextUpExp = UserUtil.getNextUpLevelExp(userData.user.exp);
          config.userLevelPercentage = Math.ceil(
            (userData.user.exp / config.userNextUpExp) * 100
          );
          if (!StringUtil.isEmpty(userData.user.avatarResourceName)) {
            const requestData = { fileName: userData.user.avatarResourceName };
            RequestUtil.sendGetRequestGetImage(
              "/file/user/avatar",
              requestData
            ).then(
              res => {
                config.userAvatarPath = res;
                store.commit("user/saveUserAvatarPath", config.userAvatarPath);
                store.commit("user/saveUserData", userData.user);
              },
              err => {
                InfoUtil.error("获取头像请求失败");
              }
            );
          }
        },
        err => {}
      );
      
    });
    const router = useRouter();
    const clickToHome = () => {
      router.push("/home");
    };
    const clickLogout = () => {
      RequestUtil.sendGetRequest("/user/logout", null).then(res => {
        if (res.code != 200) {
          InfoUtil.warning(res.message);
          return;
        }
        UserUtil.clearToken();
        router.push("/login");
      });
    };
    //跳转到发布文章页面
    const toPublishArticle = () => {
      router.push("/publish-article");
    };
    //鼠标移入头像
    const avatarMouseIn = () => {
      config.userInfoShow = true;
    };
    //鼠标离开头像
    const avatarMouseOut = () => {
      setTimeout(() => {
        //当用户鼠标离开头像后
        //判断鼠标如果立即放入到了用户信息卡片中,则不隐藏用信息卡片
        if (!config.mouseInUserInfo) {
          config.userInfoShow = false;
        }
      }, 300);
    };
    //鼠标移入用户信息卡片
    const userInfoCardMouseIn = () => {
      config.userInfoShow = true;
      config.mouseInUserInfo = true;
    };
    //鼠标离开用户信息卡片
    const userInfoCardMouseOut = () => {
      config.userInfoShow = false;
      config.mouseInUserInfo = false;
    };
    const personalCenter = () => {
      router.push("/user-info-setting/user-info");
    };
    const config = reactive({
      //是否展示用户信息卡片
      userInfoShow: false,
      //鼠标是否移入用户卡片中
      mouseInUserInfo: true,
      userLevelPercentage: 0,
      userNextUpExp: 0,
      userAvatarPath: require("@/assets/img/user/defaultUserAvatar.png")
    });

    const userData = reactive({
      user: {},
      userLevel: 0,
      followersCount: 0,
      followingCount: 0,
      contentCount: 0,
      noReadMessageCount: 0
    });

    return {
      User,
      Document,
      config,
      userData,
      avatarMouseIn,
      avatarMouseOut,
      userInfoCardMouseIn,
      userInfoCardMouseOut,
      toPublishArticle,
      clickToHome,
      personalCenter,
      clickLogout
    };
  }
};
</script>

<style scoped>
.flex-grow {
  flex-grow: 2;
}

.item {
  margin-right: 20px;
}

.box-card {
  position: absolute;
  width: 20%;
  right: 5%;

  z-index: 100000;
}

.user-info-button {
  width: 100%;
  font-weight: 600;
  font-size: 16px;
}
</style>